Feat: Add version change indicators for Dag and bundle versions in Grid view by choo121600 · Pull Request #53216 · apache/airflow

choo121600 · 2025-07-12T03:13:23Z

Summary

Adds visual indicators in the Grid view to help users identify Dag version changes and detect mixed-version TaskInstances within a single DagRun.

Problem

After updating a Dag file, it's difficult to know from which DagRun the new version is applied.
Some TaskInstances within the same DagRun may use different Dag versions, but this is not visible in the UI.

Solution

This PR introduces visual cues in the Grid view to address these pain points:

Dag Version Indicator: Vertical/horizontal orange line with tooltip showing version number
Bundle Version Indicator: Git commit icon with tooltip showing bundle version
Toggle Options: Users can choose to show None, Dag Version Indicator only, Bundle Version Indicator only, or All indicators

Change

Backend

Added bundle_version and dag_version_number fields to GridRunsResponse
Modified grid query to JOIN with DagVersion table for efficient single-query data fetch
Added dag_version_number to LightGridTaskInstanceSummary for mixed version detection

Frontend

New VersionIndicator.tsx component(BundleVersionIndicator, DagVersionIndicator)
New useGridRunsWithVersionFlags hook to calculate version change flags
Updated Bar.tsx, Grid.tsx, TaskInstancesColumn.tsx to display indicators
Added version indicator toggle in PanelButtons.tsx

Screenshots

Version Change

LocalDagBundle

Dag Version Indicator Tooltip(vertical)

Dag Version Indicator Tooltip(horizontal)

GitDagBundle

Dag Version Indicator Tooltip

Bundle Version Indicator Tooltip

Dark Mode

Toggle Option(with Legend)

Users can choose 'Show All', 'Show Dag Version', 'Show Bundle Version', 'Hide All'

Show All

Show Bundle Version

Show Dag Version

Hide All

Indicator Scenarios

Scenario 1: Normal

All tasks run with the same version
No indicator (default state)

Scenario 2: Version Change

Entire run with new version
Left indicator + version number tooltip

Scenario 3: Mixed Version

Multiple versions within single run
Left, Row indicator + version number tooltip

Scenario 4: Bundle Version & DagVersion Change

Scenario 5: Only Bundle Change (Dynamic Dag)

closes: #52286

^ Add meaningful description above
Read the Pull Request Guidelines for more information.
In case of fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.
In case of a new dependency, check compliance with the ASF 3rd Party License Policy.
In case of backwards incompatible changes please leave a note in a newsfragment file, named {pr_number}.significant.rst or {issue_number}.significant.rst, in airflow-core/newsfragments.

bugraoz93

Thanks for the PR! I think this is bringing back the deprecated and removed monolith endpoint with its methods. I think we should integrate the fix into only new structure
cc: @dstandish @pierrejeambrun

choo121600 · 2025-07-12T08:52:27Z

@bugraoz93 Thanks for your quick feedback! I saw something strange while fixing the conflict,
So I started checking the main branch — your comment helped me confirm it.

I think my endpoints follow the old style. I’ll change them to use the new structure.

bugraoz93 · 2025-07-12T09:07:17Z

@bugraoz93 Thanks for your quick feedback! I saw something strange while fixing the conflict,
So I started checking the main branch — your comment helped me confirm it.

I think my endpoints follow the old style. I’ll change them to use the new structure.

Amazing, thanks a lot!

airflow-core/src/airflow/api_fastapi/core_api/routes/ui/grid.py

choo121600 · 2025-07-13T07:58:13Z

I’ve updated the tests and removed the old structure,
but I'm testing whether the feature I added works as before🥲
After verifying the tests, I will leave a comment!

choo121600 · 2025-07-13T09:08:44Z

I’ve tested the scenarios I had in mind, and everything looks good so far 🙌
Reviews are welcome from this point.

bugraoz93

Thanks for the changes! I believe this PR still contains old deprecated code :)

airflow-core/src/airflow/api_fastapi/core_api/services/ui/grid.py

airflow-core/src/airflow/api_fastapi/core_api/services/ui/dag_version_service.py

jason810496

Nice! Thanks for the PR!

airflow-core/src/airflow/api_fastapi/core_api/services/ui/dag_version_service.py

choo121600 · 2025-07-15T15:57:13Z

I thought I deleted the old version, but it still there.
Right now, my new code and the old APIs are mixed together, and it looks like the old version is included when I commit 🤔
This might be a problem with my local setup, so I will check and fix it this week.

ephraimbuddy · 2025-07-15T16:50:11Z

If we want to visualize version change, in my opinion, we should do it for bundle version and not dag version that changes everytime especially for dynamic dags cc @jedcunningham

bbovenzi · 2025-07-15T19:11:18Z

If we want to visualize version change, in my opinion, we should do it for bundle version and not dag version that changes everytime especially for dynamic dags cc @jedcunningham

In that case, we might need to use an icon and then show the bundle version in a tooltip. Maybe something like <FiGitCommit />

pierrejeambrun · 2025-07-16T09:31:17Z

If we want to visualize version change, in my opinion, we should do it for bundle version and not dag version that changes everytime especially for dynamic dags cc @jedcunningham

Maybe we need both with different colors, dag version change (to task level) + bundle version change (dag run level only).

If we were to keep only one, I would be in favor of keeping the DagVersion because it is consistant with the Graph(Graph is showing structures of specific dag versions), And because I think source code is less important than what was actually executed.

pierrejeambrun

I think the code looks very complicated for what we are trying to achieve. (And also there are some unused stuff I believe from the legacy grid)

The backend need to serialize the dag_run.versions in the GridRunsResponse, same for tasks.

And in the UI, we just need a simple logic to check if dag_run.version of Nth run is equal to dag_run.version of (N-1)th run.

(Same logic goes for tasks, and yes if DagRun.dag_versions.lenght === 1 no need to go try the task level logic)

Maybe I missed something though.

airflow-core/src/airflow/ui/src/layouts/Details/Grid/TaskInstancesColumn.tsx

pierrejeambrun · 2025-07-16T09:57:26Z

In that case, we might need to use an icon and then show the bundle version in a tooltip. Maybe something like

I'm afraid that we can potentially have as many tooltips as TI in the grid. Which would most likely bring back tooltip performance issue we observed in the past.

bbovenzi

I think we should add a legend to make it easier for users to learn dag versions vs bundle version changes.

airflow-core/src/airflow/ui/src/components/ui/VersionIndicator.tsx

airflow-core/src/airflow/ui/src/layouts/Details/PanelButtons.tsx

airflow-core/src/airflow/ui/src/layouts/Details/Grid/Bar.tsx

airflow-core/src/airflow/ui/src/layouts/Details/Grid/TaskInstancesColumn.tsx

choo121600 · 2025-11-06T15:05:43Z

@bbovenzi I’ve been thinking about the legend, and currently, the horizontal indicator for Dag version changes and the indicator for bundle version changes use the same icon.
So, distinguishing them by icon alone seems difficult. Instead, I modified the horizontal Dag version change indicator to use a consistent style with the vertical one(a combination of a line and a circle.)

Here’s an example of what it looks like. What do you think?

choo121600 · 2025-11-14T06:47:35Z

@bbovenzi I’ve been thinking about the legend, and currently, the horizontal indicator for Dag version changes and the indicator for bundle version changes use the same icon. So, distinguishing them by icon alone seems difficult. Instead, I modified the horizontal Dag version change indicator to use a consistent style with the vertical one(a combination of a line and a circle.)

Here’s an example of what it looks like. What do you think?

@bbovenzi @pierrejeambrun This part hasn’t been implemented yet. I’d like to hear your ideas regarding the legend.

pierrejeambrun

Nice, looking better and better.

A few suggestions to try to make things simpler and improve UX.

airflow-core/src/airflow/ui/src/constants/showVersionIndicatorOptions.ts

airflow-core/src/airflow/api_fastapi/core_api/datamodels/ui/common.py

airflow-core/src/airflow/ui/src/components/ui/VersionIndicator.tsx

airflow-core/src/airflow/ui/src/layouts/Details/PanelButtons.tsx

pierrejeambrun

Feel free to mark addressed comments as resolved.

Let me know when this needs another round of review.

airflow-core/src/airflow/ui/src/constants/showVersionIndicatorOptions.ts

choo121600 · 2025-12-05T09:14:14Z

Except for this part #53216 (comment)
I’ve marked the addressed comments as resolved and updated all the screenshots.
@pierrejeambrun Could you review it once more?

bbovenzi · 2026-01-08T20:24:27Z

We'll need to rebase this after virtualizing the grid's vertical scroll.

guan404ming · 2026-01-30T11:15:12Z

Hi, this feature looks really cool. Could you please help resolve the conflicts? Thanks!

choo121600 · 2026-02-06T07:45:22Z

Hi, this feature looks really cool. Could you please help resolve the conflicts? Thanks!

Oops, I missed the notification earlier 😅
I've resolved the conflicts now. Thanks for pointing it out!

guan404ming

Look nice, just left some comments. Thanks!

airflow-core/src/airflow/ui/src/constants/showVersionIndicatorOptions.ts

airflow-core/src/airflow/ui/src/layouts/Details/DetailsLayout.tsx

airflow-core/src/airflow/ui/src/components/ui/VersionIndicator.tsx

airflow-core/src/airflow/ui/src/layouts/Details/PanelButtons.tsx

airflow-core/src/airflow/api_fastapi/core_api/services/ui/grid.py

…mponent

guan404ming

UI wise looks nice thanks!
Left one nit.

airflow-core/src/airflow/ui/src/layouts/Details/PanelButtons.tsx

pierrejeambrun

Nice, we're getting closer! Thanks for your continuous effort and being patient, that's a complex feature and that's why there's a bunch of back and forth.

There are a lot of useMemo, I think those are not needed anymore with react-compiler

pierrejeambrun · 2026-02-11T16:09:03Z

airflow-core/src/airflow/api_fastapi/core_api/datamodels/ui/common.py

    run_after: datetime
    state: DagRunState | None
    run_type: DagRunType
+    bundle_version: str | None = None


is bundle_version used?

pierrejeambrun · 2026-02-11T16:11:18Z

airflow-core/src/airflow/api_fastapi/core_api/routes/ui/grid.py

+    # get the highest dag_version_number from TIs for each run
+    latest_ti_version = (
+        select(
+            TaskInstance.run_id,
+            func.max(DagVersion.version_number).label("version_number"),
+        )
+        .join(DagVersion, TaskInstance.dag_version_id == DagVersion.id)
+        .where(TaskInstance.dag_id == dag_id)
+        .group_by(TaskInstance.run_id)
+        .subquery()
+    )


We don't need to go through all that trouble to only retrieve the 'last' version. Just return the DagRun.dag_versions attribute.

Also this will be consistent for other contributor. People will get confused as to why a DagRun has dag_versions as a list in the plublic interface, but on the grid endpoint here it's only dag_version and not a list anymore.

I find this confusing and it adds a lot of unecessary application code.

pierrejeambrun · 2026-02-11T16:13:30Z

airflow-core/src/airflow/ui/src/layouts/Details/Grid/TaskInstancesColumn.tsx

+  const taskInstances = useMemo(
+    () => gridTISummaries?.task_instances ?? [],
+    [gridTISummaries?.task_instances],
+  );
+  const taskInstanceMap = useMemo(() => {
+    const map = new Map<string, LightGridTaskInstanceSummary>();
+
+    for (const ti of taskInstances) {
+      map.set(ti.task_id, ti);
+    }
+
+    return map;
+  }, [taskInstances]);


I thought react compiler would memo this for us.

Correct. Let's remove them.

pierrejeambrun · 2026-02-11T16:20:08Z

airflow-core/src/airflow/ui/src/layouts/Details/Grid/useGridRunsWithVersionFlags.ts

+    }
+
+    return gridRuns.map((run, index) => {
+      const prevRun = gridRuns[index + 1];


Suggested change

const prevRun = gridRuns[index + 1];

const nextRun = gridRuns[index + 1];

pierrejeambrun · 2026-02-11T16:22:17Z

airflow-core/src/airflow/ui/src/constants/showVersionIndicatorOptions.ts

+  BUNDLE = "bundle",
+  DAG = "dag",


Nit:

Suggested change

BUNDLE = "bundle",

DAG = "dag",

BUNDLE_VERSION = "bundle",

DAG_VERSION = "dag",

pierrejeambrun · 2026-02-11T16:23:48Z

airflow-core/src/airflow/ui/src/layouts/Details/Grid/TaskInstancesColumn.tsx

+        let hasVersionChangeFlag = false;
+
+        if (
+          hasMixedVersions &&
+          (showVersionIndicatorMode === VersionIndicatorDisplayOptions.DAG ||
+            showVersionIndicatorMode === VersionIndicatorDisplayOptions.ALL) &&
+          idx > 0
+        ) {
+          const prevVirtualItem = itemsToRender[idx - 1];
+          const prevNode = prevVirtualItem ? nodes[prevVirtualItem.index] : undefined;
+          const prevTaskInstance = prevNode ? taskInstanceMap.get(prevNode.id) : undefined;
+
+          hasVersionChangeFlag = Boolean(
+            prevTaskInstance && prevTaskInstance.dag_version_number !== taskInstance.dag_version_number,
+          );
+        }
+


Why aren't we checking for BundleVersion change too ?

DagVersion could be the same (serialized dag is identical) but the bundle version changed (version of the file in the code)

bbovenzi · 2026-02-11T17:24:29Z

airflow-core/src/airflow/ui/src/components/ui/VersionIndicator.tsx

If we only use this in the grid view then we should move it to layouts/Details/Grid instead. components are for general reshareable components. (/ui was also supposed to be for wrappers that weren't included in chakra-ui but that we hadn't customized, but we haven't been enforcing that too well)

bbovenzi · 2026-02-11T17:28:39Z

airflow-core/src/airflow/ui/src/layouts/Details/DetailsLayout.tsx

+  // Global setting: applies to all Dags (intentionally not scoped to dagId)
+  const [showVersionIndicatorMode, setShowVersionIndicatorMode] =
+    useLocalStorage<VersionIndicatorDisplayOptions>(
+      `version_indicator_display_mode`,


I wonder if we should make a src/constants/localStorage.ts file to keep track of how many localStorage values we have.

bbovenzi · 2026-02-11T17:37:25Z

airflow-core/src/airflow/ui/src/constants/showVersionIndicatorOptions.ts

+ */
+import { createListCollection } from "@chakra-ui/react";
+
+export enum VersionIndicatorDisplayOptions {


VersionIndicatorOptions or VersionDisplayOptions

We use this a lot. Let's try to have a simpler variable name.

choo121600 requested review from bbovenzi, bugraoz93, ephraimbuddy, jason810496, jscheffl, pierrejeambrun, rawwar, ryanahamilton and shubhamraj-git as code owners July 12, 2025 03:13

boring-cyborg bot added area:API Airflow's REST/HTTP API area:UI Related to UI/UX. For Frontend Developers. labels Jul 12, 2025

choo121600 force-pushed the feature/version-indicator branch 2 times, most recently from 09ecc2b to bd021e8 Compare July 12, 2025 07:04

bugraoz93 requested changes Jul 12, 2025

View reviewed changes

kyungjunleeme reviewed Jul 13, 2025

View reviewed changes

airflow-core/src/airflow/api_fastapi/core_api/routes/ui/grid.py Outdated Show resolved Hide resolved

choo121600 requested a review from bugraoz93 July 13, 2025 09:10

bugraoz93 reviewed Jul 14, 2025

View reviewed changes

airflow-core/src/airflow/api_fastapi/core_api/services/ui/grid.py Outdated Show resolved Hide resolved

airflow-core/src/airflow/api_fastapi/core_api/services/ui/grid.py Outdated Show resolved Hide resolved

kyungjunleeme reviewed Jul 14, 2025

View reviewed changes

airflow-core/src/airflow/api_fastapi/core_api/services/ui/dag_version_service.py Outdated Show resolved Hide resolved

jason810496 reviewed Jul 14, 2025

View reviewed changes

pierrejeambrun reviewed Jul 16, 2025

View reviewed changes

airflow-core/src/airflow/ui/src/layouts/Details/Grid/TaskInstancesColumn.tsx Outdated Show resolved Hide resolved

bbovenzi reviewed Oct 30, 2025

View reviewed changes

choo121600 requested a review from guan404ming as a code owner November 2, 2025 07:15

pierrejeambrun added the type:new-feature Changelog: New Features label Nov 4, 2025

choo121600 requested a review from bbovenzi November 14, 2025 06:45

choo121600 requested a review from pierrejeambrun November 14, 2025 06:47

choo121600 changed the title ~~Feat: Visualize DAG version changes and mixed versions in Grid view~~ Feat: Add version change indicators for Dag and bundle versions in Grid view Nov 14, 2025

pierrejeambrun reviewed Nov 24, 2025

View reviewed changes

pierrejeambrun reviewed Dec 3, 2025

View reviewed changes

airflow-core/src/airflow/ui/src/constants/showVersionIndicatorOptions.ts Outdated Show resolved Hide resolved

choo121600 requested a review from pierrejeambrun December 14, 2025 08:47

choo121600 requested a review from vatsrahul1001 as a code owner December 23, 2025 04:17

feat: add version indicator for DAG and bundle versions in Grid view

f48e7ec

choo121600 force-pushed the feature/version-indicator branch from fad0cf6 to f48e7ec Compare January 10, 2026 06:13

Merge branch 'main' into feature/version-indicator

25ccdae

guan404ming reviewed Feb 6, 2026

View reviewed changes

choo121600 added 3 commits February 8, 2026 00:09

Refactor version indicator handling and add VersionIndicatorSelect co…

cf678a8

…mponent

Merge branch 'main' into feature/version-indicator

5a59df4

fix static check

fdfccb9

choo121600 force-pushed the feature/version-indicator branch from c600518 to fdfccb9 Compare February 7, 2026 19:22

guan404ming approved these changes Feb 8, 2026

View reviewed changes

airflow-core/src/airflow/ui/src/layouts/Details/PanelButtons.tsx Show resolved Hide resolved

Refactor VersionIndicatorSelect placement in PanelButtons component

8d3d862

pierrejeambrun reviewed Feb 11, 2026

View reviewed changes

bbovenzi reviewed Feb 11, 2026

View reviewed changes

	const prevRun = gridRuns[index + 1];
	const nextRun = gridRuns[index + 1];

Conversation

choo121600 commented Jul 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Problem

Solution

Change

Backend

Frontend

Screenshots

Version Change

LocalDagBundle

GitDagBundle

Dark Mode

Toggle Option(with Legend)

Show All

Show Bundle Version

Show Dag Version

Hide All

Indicator Scenarios

Scenario 1: Normal

Scenario 2: Version Change

Scenario 3: Mixed Version

Scenario 4: Bundle Version & DagVersion Change

Scenario 5: Only Bundle Change (Dynamic Dag)

Uh oh!

bugraoz93 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

choo121600 commented Jul 12, 2025

Uh oh!

bugraoz93 commented Jul 12, 2025

Uh oh!

Uh oh!

choo121600 commented Jul 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

choo121600 commented Jul 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bugraoz93 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jason810496 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

choo121600 commented Jul 15, 2025

Uh oh!

ephraimbuddy commented Jul 15, 2025

Uh oh!

bbovenzi commented Jul 15, 2025

Uh oh!

pierrejeambrun commented Jul 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pierrejeambrun left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

pierrejeambrun commented Jul 16, 2025

Uh oh!

bbovenzi left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

choo121600 commented Nov 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

choo121600 commented Jul 12, 2025 •

edited

Loading

bugraoz93 left a comment •

edited

Loading

choo121600 commented Jul 13, 2025 •

edited

Loading

choo121600 commented Jul 13, 2025 •

edited

Loading

pierrejeambrun commented Jul 16, 2025 •

edited

Loading

choo121600 commented Nov 6, 2025 •

edited

Loading